<template>
  <BasicModal
    width="700px"
    v-bind="$attrs"
    @register="registerModal"
    title="拷贝信息"
    ok-text="确认拷贝"
    @ok="copyInfo"
  >
    <div class="info">
      <div class="title">PC登录地址</div>
      <div class="content" v-html="info.pc_url"></div>
    </div>
    <div class="info">
      <div class="title">H5登录地址</div>
      <div class="content" v-html="info.h5_url"></div>
    </div>
    <div class="info">
      <div class="title">APP下载地址</div>
      <div class="content" v-html="info.app_download"></div>
    </div>
    <div class="info">
      <div class="title">代理账号</div>
      <div class="content">{{ info.username }}</div>
    </div>
    <div class="info">
      <div class="title">代理名称</div>
      <div class="content">{{ info.nickname }}</div>
    </div>
    <div class="info">
      <div class="title">初始密码</div>
      <div class="content">{{ info.passwordText }}</div>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { useMessage } from '@/hooks/web/useMessage';

  const { notification } = useMessage();

  const info = ref({
    pc_url: '',
    h5_url: '',
    app_download: '',
    username: '',
    nickname: '',
    passwordText: '',
  });

  const [registerModal] = useModalInner((data) => {
    info.value = data;
  });

  const copyInfo = () => {
    const { pc_url, h5_url, app_download, username, nickname, passwordText } = info.value;
    const txt = `PC登录地址：${pc_url}\nH5登录地址：${h5_url}\nAPP下载地址：${app_download}\n代理账号：${username}\n代理名称：${nickname}\n代理密码：${passwordText}\n`;
    navigator.clipboard.writeText(txt);
    notification.success({
      message: '复制成功',
      description: `复制成功`,
      duration: 3,
    });
  };
</script>
<style lang="less" scoped>
  .info {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    width: 100%;
    height: 40px;
    border: 1px solid rgb(240 240 240);

    .title {
      display: flex;
      align-items: center;
      justify-content: end;
      width: 100px;
      height: 100%;
      margin-right: 4px;
      padding: 0 8px;
      border-right: 1px solid rgb(240 240 240);
      background-color: rgb(247 247 247);
      text-align: right;
    }

    .content {
      display: flex;
      align-items: center;
    }
  }
</style>
